<!DOCTYPE html>
<html>
<head>
<title>#{get 'title' /}</title>
<meta charset="${_response_encoding}">
<link rel="stylesheet" media="screen"
	href="@{'/public/stylesheets/main.css'}">
#{stylesheet 'smoothness/jquery-ui-1.8.13.custom.css' /}
#{get 'moreStyles' /}
<link rel="shortcut icon" type="image/png"
	href="@{'/public/images/favicon.png'}">
<script src="@{'/public/javascripts/jquery-1.6.4.min.js'}"
	type="text/javascript" charset="${_response_encoding}"></script>
<script src="/public/javascripts/js/highcharts.js" type="text/javascript"></script>

<script
	src="@{'/public/javascripts/tinymce/jscripts/tiny_mce/tiny_mce.js'}"
	type="text/javascript" charset="${_response_encoding}"></script>

<!-- Renad, tagCloud script file -->

<script src="@{'/public/javascripts/jquery.tagcloud.js'}"
	type="text/javascript" charset="${_response_encoding}"></script>
<!-- /Renad, tagCloud code -->
<script src="@{'/public/javascripts/jquery-1.5.2.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{script 'jquery-ui-1.8.13.custom.min.js' /}
#{get 'moreScripts' /}
<style type="text/css">
#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#menu ul li {
	display: inline;
}

#menu ul li a {
	text-decoration: none;
	padding: .2em 1em;
	color: #fff;
	background-color: #036;
}

#menu ul li a:hover {
	color: #fff;
	background-color: #369;
}
</style>

<style type="text/css">
#navMenu {
	margin: 0;
	padding: 0;
}

#navMenu ul {
	margin: 0;
	padding: 0;
	line-height: 30px;
}

#navMenu li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	position: relative;
}

#navMenu ul li a {
	text-align: center;
	font-family: "Comic Sans MS", cursive;
	text-decoration: none;
	display: block;
	height: 30px;
	width: 200px;
	float: left;
	margin-right: 5px;
	padding: 10px;
	color: #fff;
	background-color: #036;
}

#navMenu ul ul {
	position: absolute;
	visibility: hidden;
	font-size: 12;
	top: 50px;
}

#navMenu ul li:hover ul {
	visibility: visible;
	color: #fff;
	background-color: #369;
}
</style>

</head>

<body>
	<div id="header">
		<div id="wrapper">
			<div id="navMenu">
				<ul>

					#{if session.get("RegisteredUserId") != null}
					<li><a href="/Application/updates">Home </a></li> #{/if} #{if
					session.get("RegisteredUserId") != null}
					<li><a href="/Application/viewProfile">Profile </a></li> #{/if}

					<!-- Begin @author Ayatullah Marawan
	link search for memebrs that render page: searchPage.html-->

					#{if session.get("RegisteredUserId") != null}
					<li><a href="/Application/searchPage">Search For Members </a>
					</li> #{/if}
					<!-- End @author Ayatullah Marawan-->
					<!-- Start Mayar -->
					#{if session.get("RegisteredUserId") != null}
					<li><a href="/Application/viewNotifications">Notifications
					</a>
						<ul>

						</ul></li> #{/if}
					<!-- End Mayar -->
				</ul>

				<!-- Dina -->
				<!-- This is a hyper link that redirect to the browse main page -->
		<ul>
			<li><a href="/Tutorials/browseMain.html">Browse</a></li>
		</ul>
		<!-- /Dina -->

			</div>
			<!-- end navMenu div -->
		</div>
		<!-- end wrapper div -->

	</div>

	<table border="0" width="100%">
		<tr>

			<td>#{if session.get("RegisteredUserId") == null}
				<form action="@{Application.logIn()}" method="GET">
					<table border="0">
						<tr>#{ifErrors} ${error} #{/ifErrors}
						</tr>
						<tr>
							<td>Email</td>
							<td><input type="text" name="email" /> <span
								style="color: #c00" class="error">#{error 'email' /}</span></td>
						</tr>
						<tr>
							<td>Password</td>
							<td><input type="password" name="password" /> <span
								style="color: #c00" class="error">#{error 'password' /}</span></td>
							<td><input type="submit" value="LogIn" /></td>
						</tr>
						<tr>
							<td><a href="@{Application.signUp()}">Register</a></td>
						</tr>

					</table>
				</form> #{/if} #{else}
				<table>
					<tr>
						<td><h3></h3></td>

						<td>

							<form action="@{Application.logOut()}" method="GET">
								#{if session.get("RegisteredUserId")!= null} Welcome
								${models.RegisteredUser.findById(Long.parseLong(session.get("RegisteredUserId"))).name}
								#{/if} <input type="submit" value="Log out" />
							</form>
						</td>

					</tr>
				</table> #{/else}
			</td>
		</tr>
	</table>

	<div>#{doLayout /}</div>

	<br>
	<br>
	<br>



	<!-- Renad, using the rendered list to create tagCloud and using the JS file as well -->
	#{if session.get("RegisteredUserId")!= null} #{list items: topics,
	as:'topicCounter'}
	<div style="float: left;" id="whatever">
		&nbsp <a href="/Topics/topicView?topicId=${topicCounter.id}"
			rel="${topicCounter.topicCount}">${topicCounter.topicName.raw()}</a>

	</div>

	<script type="text/javascript">
		$.fn.tagcloud.defaults = {
			size : {
				start : 17,
				end : 23,
				unit : 'pt'
			},
			color : {
				start : '#ffb650',
				end : '#3910ff'
			}
		};

		$(function() {
			$('#whatever a').tagcloud();
		});
	</script>
	#{/list} #{/if}

	<!-- /Renad-->

</body>

</html>
